<template>
	<view>
		<view>
			<view class="city">
				<view style="width:60%">
					<view class="city_item">
						<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
						<view class="name">
							{{$t('哈尔滨')}}
						</view>
					</view>
					<view class="citySty">
						{{$t('黑龙江省哈尔滨市')}}
					</view>
				</view>
				
				<view class="line">
					<view class="text">
						{{$t('途经')}} 3
					</view>
					<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
				</view>
				<view style="width:60%">
					<view class="city_item">
						<image class="ico" src="/static/img/chain.png" mode="widthFix"></image>
						<view class="name">
							{{$t('珲春')}}
						</view>
					</view>
					<view class="citySty">
						{{$t('黑龙江省黑河市')}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
.city{
	padding:50rpx 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	// background: #fff;
	border-radius: 0 0 40rpx 40rpx;
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.05);
	.line{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.text{
			color: #278AFF;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 28rpx;
		}
		.ico{
			width: 50%;
		}
	}
	.citySty {
		color: #535353;
		font-family: "PingFang SC";
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		margin-top: 16rpx;
	}
	.city_item{
		flex-shrink: 0;
		display: flex;
		align-items: center;
		.ico{
			flex-shrink: 0;
			width: 50rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
		}
		.name{
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
	}
}
</style>
